<template>
	<view class="chatPage">
		<!-- 聊天列表 -->
		<scroll-view :scroll-y="true" class="scrollView" scroll-with-animation :scroll-into-view="scrollInto">
			<block v-for="(item,index) in list" :key="index">
				<!-- pretime只有一条数据，传0，多条时传上一条数据的时间 -->
				<chat-list :item="item" :index="index" :pretime="index > 0 ? list[index-1].time : 0" />
			</block>
		</scroll-view>

		<!-- 底部操作条 -->
		<view class="operationBar">
			<!-- 取消键盘上推页面 -->
			<input type="text" v-model="txt" placeholder="请输入内容" @confirm="send" />
			<view class="iconfont icon-fabu" @tap="send" hover-class="animation_jello_5 fontMainColor"></view>
		</view>
	</view>
</template>

<script>
	import chatList from "@/components/chat/chat-list.vue"
	export default {
		components: {
			chatList
		},
		onLoad() {
			this.getDate();
		},
		//当页面加载完成时,让消息滚动到底部
		onReady() {
			this.pageToBottom();
		},
		data() {
			return {
				txt: "",
				scrollInto: void 0,
				list: [],
			};
		},
		methods: {
			getDate() {
				this.list = [{
					id: 0,
					headPortrait: "https://picsum.photos/100/100?random=1",
					nickName: "好贵",
					// text image video audio
					type: "text",
					data: "dnigneig gn",
					time: "1598148116"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "靓仔",
					// text image video audio
					type: "text",
					data: "看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了",
					time: "1598151139"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "衰仔",
					// text image video audio
					type: "text",
					data: "看看",
					time: "1598151161"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "靓仔",
					// text image video audio
					type: "text",
					data: "看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了",
					time: "1598151139"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "靓仔",
					// text image video audio
					type: "text",
					data: "看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了看到了吧，不是的了",
					time: "1598151139"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "靓仔",
					// text image video audio
					type: "text",
					data: "看到了吧,没看过是吧",
					time: "1598151139"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "靓仔",
					// text image video audio
					type: "text",
					data: "号能给我用用么???",
					time: "1598151139"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "靓仔",
					// text image video audio
					type: "text",
					data: "号能给我用用么???",
					time: "1598151139"
				}, {
					id: 1,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "靓仔",
					// text image video audio
					type: "text",
					data: "他来到了哪里了吧看俺了",
					time: "1598151139"
				}];
			},
			// 发送消息
			send() {
				if (this.txt.trim() === "") {
					uni.showToast({
						title: "消息不能为空",
						icon: "none"
					});
					return;
				};
				let obj = {
					id: 0,
					headPortrait: "https://picsum.photos/100/100?random=2",
					nickName: "衰仔",
					// text image video audio
					type: "text",
					data: this.txt,
					time: new Date().getTime()
				};
				this.list.push(obj);
				this.txt = "";
				// 发送完消息后滚动到底部
				this.pageToBottom();
			},

			// 滚动到底部的方法
			pageToBottom() {
				let pageToBottomTimeId = setTimeout(() => {
					// 获取最后一个索引
					let lastIndex = this.list.length - 1;
					// 如果索引为0,则停止滚动
					if (lastIndex < 0) return;
					this.scrollInto = `chat${lastIndex}`;
					clearTimeout(pageToBottomTimeId);
				}, 0.2 * 1000);
			},
		}
	}
</script>

<style lang="scss">
	.chatPage {
		position: relative;
	}

	// 聊天列表
	.scrollView {
		height: calc(100% - 110rpx);
		background-color: #F9F9F9;
	}

	// 底部操作条
	.operationBar {
		height: 110rpx;
		// 固定在底部
		@include fixedBottom;
		@include flexCenterCenter;
		border-top: 1rpx solid #D7D7D7;

		>input {
			flex: 1;
			background-color: #FAF9FE;
			margin: 0 20rpx;
			font-size: 1.1rem;
			padding: 6rpx 14rpx;
			border-radius: 10rpx;
		}

		>view {
			width: 110rpx;
			height: 100%;
			@include flexCenterCenter;
			font-size: 1.2rem;
		}
	}

	// 点击发送时
	.fontMainColor {
		color: #FF4A6A;
	}
</style>
